<template>
  <div>
    <div class="content-box">
      <div class="left-box">
        <div class="title-box">计算机管理</div>
        <div class="search-wrap">
          <div class="search-left-box"></div>
          <div class="search-right-box">
            <div class="search-input-box">
              <img class="search-icon" src="@/assets/images/home/search-icon.png" alt="" />
              <input
                class="input"
                v-model.trim="searchParam.search"
                @input="onSearch"
                type="text"
                placeholder="搜索计算机名称/计算机实际名称"
              />
            </div>
          </div>
        </div>
        <div class="table-list-box">
          <el-table v-loading="loading" element-loading-text="加载中..." :data="tableData" @row-click="singleElection" :max-height="531">
            <el-table-column label="" width="30">
              <template #default="scope">
                <el-radio class="radio" v-model="templateSelection" :label="scope.row.computer_id"></el-radio>
                <span> </span>
              </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip align="center" prop="computer_id" label="ID" />
            <el-table-column show-overflow-tooltip align="center" prop="nick_name" label="计算机名称" />
            <el-table-column show-overflow-tooltip align="center" prop="real_name" label="所属计算机" />
            <el-table-column show-overflow-tooltip align="center" prop="create_time" label="创建时间" />
          </el-table>
        </div>
        <div class="pagination-content">
          <Pagination
            :total="pageListTotal"
            v-model:page="searchParam.page"
            v-model:limit="searchParam.limit"
            @pagination="getComputerList"
            :pageSizes="[15, 45, 75, 100]"
          />
        </div>
        <div class="desc-btn-box">
          <div class="btn-box">
            <div class="add-printer" @click="handleAction(1)">新增计算机</div>
            <template v-if="templateSelection">
              <div class="update-status" @click="handleAction(2)">修改</div>
              <div class="update-status" @click="handleAction(3)">删除</div>
            </template>
            <div class="update-status" @click="handleAction(4)">返回</div>
          </div>
        </div>
      </div>
    </div>
    <Add
      v-model:addComputerVisible="isShowAddCompunter"
      :computerId="templateSelection"
      :actionType="actionType"
      @onConfirm="getComputerList"
      v-model:computerName="computerName"
    />
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Add from './components/Add.vue'
import Pagination from '@/components/Pagination/Index.vue'
import { computerList, computerDelete } from '@/api/computer'
import { debounce } from '@/utils/toolsValidate'
import { useRouter } from 'vue-router'

const router = useRouter()

const tableData = ref([])

const loading = ref(false)
const searchParam = reactive({ page: 1, limit: 15, search: '' })
const pageListTotal = ref(0)
const isShowAddCompunter = ref(false)
const templateSelection = ref('')
const actionType = ref('add')
const computerName = ref('')

onMounted(() => { getComputerList() })

function singleElection(row) {
  templateSelection.value = row.computer_id
  computerName.value = row.nick_name
}

function getComputerList() {
  loading.value = true
  computerList(searchParam).then(res => {
    if (res.status === 200) {
      tableData.value = res?.data?.list?.data || []
      pageListTotal.value = res?.data?.list?.total || 0
      loading.value = false
    }
  }).finally(() => {
    loading.value = false
  })
}

function handleAction(index) {
  if (index === 1) {
    actionType.value = 'add'
    isShowAddCompunter.value = true
    return
  }
  if (index === 2) {
    if (!templateSelection.value) { ElMessage.warning('请先选择对应的计算机'); return }
    actionType.value = 'edit'
    isShowAddCompunter.value = true
    return
  }
  if (index === 3) {
    if (!templateSelection.value) { ElMessage.warning('请先选择对应的计算机'); return }
    ElMessageBox.confirm('您确认删除当前计算机？', '温馨提示', {
      confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
    }).then(() => {
      computerDelete({ computer_id: templateSelection.value }).then(res => {
        if (res.status === 200) {
          ElMessage.success('删除成功!')
          templateSelection.value = ''
          getComputerList()
        }
      })
    }).catch(() => {})
    return
  }
  if (index === 4) {
    router.back()
  }
}

const onSearch = debounce(function () { searchParam.page = 1; getComputerList() }, 500)
</script>

<style lang="scss" src="./modules/Computer.scss" scoped></style>
